<template>
  <div>
    <el-main height="">
      <!-- 新增按钮 打开新增对话框
       -->
      <el-button type="success" size="small" @click="openAddWindow" plain icon="el-icon-plus">新增</el-button>
      <!-- 表格数据 -->

      <el-table :height="tableHeight" v-loading="loading" :data="menuList" style="width: 100%; margin-top: 10px"
        row-key="id" border :tree-props="{ children: 'children' }">
        <el-table-column prop="label" label="菜单名称"> </el-table-column>
        <el-table-column prop="type" label="菜单类型" align="center">
          <template slot-scope="scope">
            <el-tag type="normal" v-if="scope.row.type == 0">目录</el-tag>
            <el-tag type="success" v-if="scope.row.type == 1">菜单</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 2">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="菜单图标" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')">
            </i>
            <!--  如果没有el-icon 就给一个默认的 -->
            <i v-else class="el-icon-eleme"></i>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="路由名称" align="center">
        </el-table-column>
        <el-table-column prop="path" label="路由地址" align="center">
        </el-table-column>
        <el-table-column prop="url" label="组件路径" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  新增或者修改对话框 -->
      <system-dialog :title="menuDialog.title" :visible="menuDialog.visible" :height="menuDialog.height"
        :width="menuDialog.width" @onClose="onClose()" @onConfirm="onConfirm()">
        <div slot="content">
          <el-form :model="menu" ref="menuForm" :rules="rules" :inline="true" size="small">
            <!-- 菜单类型 -->
            <el-row>
              <el-col :span="24">
                <el-form-item label="菜单类型">
                  <el-radio-group v-model="menu.type" prop="type">
                    <el-radio :label="0">目录</el-radio>
                    <el-radio :label="1">菜单</el-radio>
                    <el-radio :label="2">按钮</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="所属菜单" size="small" prop="parentName">
              <el-input v-model="menu.parentName" :readonly="true" @click.native="selectParentMenu"></el-input>
            </el-form-item>
            <el-form-item label="菜单名称" size="small" prop="label">
              <el-input v-model="menu.label"></el-input>
            </el-form-item>

            <el-form-item label="路由名称" size="small" prop="name" v-if="menu.type == 1">
              <el-input v-model="menu.name"></el-input>
            </el-form-item>
            <!-- 0是菜单 1是目录 2是按钮 -->
            <el-form-item label="路由地址" size="small" prop="path" v-if="menu.type != 2">
              <el-input v-model="menu.path"></el-input>
            </el-form-item>
            <el-form-item label="组件路径" size="small" prop="url" v-if="menu.type == 1">
              <el-input v-model="menu.url"></el-input>
            </el-form-item>
            <el-form-item label="权限字段" size="small" prop="code">
              <el-input v-model="menu.code"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标" size="small">
              <!--  菜单图标自定义封装一个图标选择器 -->
              <my-icon @selecetion="setIcon" ref="child" />
              <!--  菜单图标自定义封装一个图标选择器 -->
            </el-form-item>
            <el-form-item label="菜单序号" size="small" prop="orderNum">
              <el-input v-model="menu.orderNum"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </system-dialog>

      <!-- 所属部门对话框 -->
      <!-- 选择所属菜单弹框 -->
      <system-dialog :title="parentDialog.title" :width="parentDialog.width" :height="parentDialog.height"
        :visible="parentDialog.visible" @onClose="onParentClose" @onConfirm="onParentConfirm">
        <div slot="content">
          <el-tree style="font-size: 14px" ref="parentTree" :data="parentMenuList" node-key="id" :props="defaultProps"
            empty-text="暂无数据" :show-checkbox="false" default-expand-all :highlight-current="true"
            :expand-on-click-node="false" @node-click="handleNodeClick">
            <div class="customer-tree-node" slot-scope="{ node, data }">
              <!-- 长度为0说明没有下级 -->
              <span v-if="data.children.length == 0">
                <i class="el-icon-document" style="color: #8c8c8c; font-size: 18px" />
              </span>
              <span v-else @click.stop="changeIcon(data)">
                <svg-icon v-if="data.open" icon-class="add-s" />
                <svg-icon v-else icon-class="sub-s" />
              </span>
              <span style="margin-left: 3px">{{ node.label }}</span>
            </div>
          </el-tree>
        </div>
      </system-dialog>
    </el-main>
  </div>
</template>

<script>
  import {
    getMenuListApi,
    getParentMenuListApi,
    addMenuApi,
    editMenuApi,
    checkPermissionApi,
    deletePermissionByIdApi,
  } from "@/api/menu";
  import SystemDialog from "@/components/system/SystemDialog";
  import { elementIcons } from "@/utils/icons";
  import MyIcon from "@/components/system/MyIcon.vue";
  // import { MyIcon } from "@/components/system/MyIcon" ;
  // import { MyIcon } from "@/components/system/MyIcon";
  export default {
    // 注册组件
    components: {
      SystemDialog: SystemDialog,
      MyIcon: MyIcon,
    },
    name: "menuList",
    data() {
      return {
        loading: false,
        // icon数组
        // iconList: [],
        // userChooseIcon: "", // 用户选中的图标
        //上级菜单弹框属性

        parentDialog: {
          title: "选择所属菜单",
          width: 280,
          height: 450,
          visible: false,
        },
        //树属性定义
        defaultProps: {
          children: "children",
          label: "label",
        },
        parentMenuList: [], //所属菜单列表
        menuList: [],
        tableHeight: 0, // 表格的高度

        menuDialog: {
          title: "新增",
          visible: false,
          width: 630,
          height: 270,
        },
        menu: {
          id: "",
          type: "",
          parentId: "",
          parentName: "",
          label: "",
          icon: "",
          name: "",
          path: "",
          url: "",
          code: "",
          orderNum: "",
        },
        rules: {
          type: [
            { required: true, trigger: "change", message: "请选择菜单类型" },
          ],
          parentName: [
            { required: true, trigger: "change", message: "请选择所属菜单" },
          ],
          label: [{ required: true, trigger: "blur", message: "请输入菜单名称" }],
          name: [{ required: true, trigger: "blur", message: "请输入路由名称" }],
          path: [{ required: true, trigger: "blur", message: "请输入路由路径" }],
          url: [{ required: true, trigger: "blur", message: "请输入组件路径" }],
          code: [{ required: true, trigger: "blur", message: "请输入权限字段" }],
        },
        // 表格数据
      };
    },
    created() {
      this.search();

      // this.getIconList();
    },

    mounted() {
      this.$nextTick(() => {
        // 挂载后端固定表格高度
        this.tableHeight = window.innerHeight;
        -180;
      });
    },
    methods: {
      /**
       * 编辑按钮
       */
      async handleEdit(row) {
        debugger;
        this.menuDialog.visible = true;

        //  数据回显
        this.$objCopy(row, this.menu);
        //  回显图标选择器
        this.$nextTick(() => {
          this.$refs.child.userChooseIcon = row.icon;
        });
        // 设置窗口标题
        this.menuDialog.title = "编辑菜单";

        //
      },

      /**
       *   删除按钮
       */
      async handleDelete(row) {
        let result = await checkPermissionApi({ id: row.id });
        //  判断是否要删除
        if (!result.success) {
          //
          this.$message.warning(result.message);
        } else {
          // 说明没有子菜单
          let confirm = await this.$myconfirm("确定要删除");
          if (confirm) {
            let res = await deletePermissionByIdApi({ id: row.id });
            // 成功提示
            this.$message.success(res.message);
            // 刷新
            this.search();
          } else {
            // 删除失败
            //
            this.$message.error("删除失败");
          }
        }

        // this.4
      },
      /**
       * 设置选中的图标
       */
      setIcon(icon) {
        debugger;
        this.menu.icon = icon;
      },

      /**
       * 点击所属菜单节点个改变图标
       */
      changeIcon(data) {
        data.open = !data.open;
        // this.$refs.parentTree.store.node
      },
      /**
       * 所属菜单节点点击事件
       */
      handleNodeClick(data) {
        this.menu.parentId = data.id;
        this.menu.parentName = data.label;
      },
      /**
       *  所属菜单对话框确定回调事件
       */
      onParentConfirm() {
        this.parentDialog.visible = false; // 关闭窗口
      },
      /**
       *  所属菜单 对话框关闭回调事件
       */
      onParentClose() {
        this.parentDialog.visible = false; // 关闭窗口
      },
      /**
       *  选择所属菜单
       */
      async selectParentMenu() {
        this.parentDialog.visible = true;
        //  发送查询请求
        let res = await getParentMenuListApi();
        if (res.success) {
          console.log(res);
          this.parentMenuList = res.data;
        }
      },
      /**
       *  菜单对话框，确定按钮回调方法
       */
      onConfirm() {
        this.$refs.menuForm.validate(async (valid) => {
          if (valid) {
            let res = null;
            // 判断是新增操作还是修改操作

            if (this.menu.id != "") {
              // 修改请求
              res = await editMenuApi(this.menu);

              // 说明是修改操作
            } else {
              // 新增请求
              res = await addMenuApi(this.menu);
            }
            debugger;
            if (res.success) {
              this.$message.success(res.message);
              this.search();
              this.menuDialog.visible = false;
            } else {
              this.$message.error(res.message);
            }
          }
        });
      },
      /**
       *  菜单对话框 取消按钮回调方法
       */
      onClose() {
        this.menuDialog.visible = false;
      },
      /**
       *  查询权限菜单
       */
      async search() {
        try {
          this.loading = true
          let res = await getMenuListApi();
          if (res.success) {
            this.menuList = res.data;
          }
        } catch (e) { }
        finally {
          this.loading = false

        }

      },
      /**
       * 打开新增窗口
       */
      openAddWindow() {
        this.$nextTick(() => {
          // 按到子组件的userChooseIcon 属性置为空
          this.$refs.child.userChooseIcon = "";
        });
        this.userChooseIcon = ""; // 清空图标选择器
        // 清空表单的数据
        this.$resetForm("menuForm", this.menu);
        // 设置窗口的标题
        this.menuDialog.title = "新增菜单";
        this.menuDialog.visible = true;
      },
    },
  };
</script>

<style scope lang="scss" scoped>
  ::v-deep .has-gutter th {
    background-color: #F2F6FC;
  }

  .iconList {
    width: 400px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    justify-content: space-around;

    flex-wrap: wrap;

    i {
      display: inline-block;
      width: 60px;
      height: 45px;
      color: #000000;
      font-size: 20px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      line-height: 45px;
      margin: 5px;

      &:hover {
        color: orange;
        border-color: orange;
      }
    }
  }

  .chooseIcons {
    width: 175px;
    background-color: #ffffff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 33px;
    line-height: 25px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
</style>